<template>
<div class="room">
	
	<div>
	<div class="button-Box">
		<el-button @click="handlerQuit()">退出房间</el-button>
		<el-button @click="handlerOffline">停止自习</el-button>
		<el-button @click="handlerDelRoom" v-if="room.userId==me.id">关闭房间</el-button>
	</div>
	<div class="room-title">{{room.name}}</div>
	<div class="member-box-background">
	<div class="member-box" :style="">
		<div v-for="m in roomMemberData" class="member" :style="!m.userId==''?'background:rgba(103,194,58,0.4);':'background:rgba(203,203,203,0.4);'">

			<div  v-if="!m.userId==''" class="member-joined">
				 <el-popover
					    placement="bottom"
					    width="60"
					    trigger="hover"
					    >
					   	<div style="text-align: center;">
					   		<p style="font-size: 16px;color:limegreen">{{m.username}}</p>
					   		<p style="font-size: 18px;margin-top: 10px;">目标:{{m.purpose}}</p>
					   		<p style="font-size: 18px;margin-top: 10px;">自习时长:{{getTime(m.created)}}分钟</p>
					   	</div>
    					 <template #reference >
    					 	<div @click="ownerId=m.userId;userInfoVisible=true" style="cursor: pointer;">
    					 	<el-avatar 
    					 		:src="m.icon" 
    					 		icon="el-icon-user-solid"  
    					 		:size="70" 
    					 		style="border: 2px solid steelblue;">
    					 	</el-avatar>
    					 	</div>
    					 </template>
				  </el-popover>
					

			</div>
			<img v-else @click="joinDialogFormVisible=true;seatSelected=m.seatnumber"  src="~@/assets/image/room/join.png" style="height: 70px;width: 70px;margin-top:30px;cursor: pointer;padding: -15px 0;" /><br />			
			<img src="~@/assets/image/room/empty2.png" style="height:90px;width: 150px;" />
		</div>
	</div>
	</div>
	</div>

		<!--加入座位窗口-->
		<el-dialog title="加入信息" :visible.sync="joinDialogFormVisible" width="20%">
  			<el-form :model="roomMemberDTO">
      		<el-form-item label="自习目标" :label-width="formLabelWidth">
      			<el-input v-model="roomMemberDTO.purpose" autocomplete="off"></el-input>
    		</el-form-item>
  			</el-form>
  			<div slot="footer" class="dialog-footer">
   			 <el-button @click="joinDialogFormVisible = false">取 消</el-button>
   			 <el-button type="primary" @click="joinDialogFormVisible = false;handlerJoin()">确 定</el-button>
  			</div>
		</el-dialog>
			<!--用户信息弹窗-->
			<el-dialog :visible.sync="userInfoVisible" width="20%" title="个人界面" center>
					<UserInfo :ownerId="ownerId"></UserInfo>
			</el-dialog>	
		
		</div>
		
</template>

<script>
	import {mapState} from 'vuex'
	import UserInfo from '@/components/HomeModule/UserInfo'
	export default{
		name:'Room',
		props:['roomId'],
		components:{
			UserInfo
		},
		data(){
			return {
				room:{
					
				},
				refreshTimer:null,
				getDataTimer:null,
				seatSelected:'',
				formLabelWidth:"80px",
				joinDialogFormVisible:false,
				userInfoVisible:false,
				ownerId:'',
				roomMemberDTO:{
					roomId:'',
					userId:'',
					purpose:'',
					seatnumber:1,
					created:'',
				},
				roomMemberData:[
				],
				background:[
			 		require("@/assets/image/room/room-background-01.jpeg"),
				],
				memberBoxBackground:{
					background:"url("+require("@/assets/image/2232.png")+")",
					backgroundRepeat:'no-repeat',
            		backgroundSize: 'cover'
				},
			}
		},
		computed:{
			...mapState(['me'])
		},
		methods:{
			handlerJoin(){
				this.roomMemberDTO.seatnumber=this.seatSelected;
				this.$axios({
					method:'POST',
					url:'room_member/join',
					headers:{
						authorization:localStorage.getItem("token")
					},
					data:this.roomMemberDTO
				}).then(
					response=>{
						if(response.data.success){
							this.refresh()
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			handlerDelRoom(){
				this.$confirm('确认关闭该房间','提示',{
					confirmButtonText:'确定',
					concelButtonText:'取消',
					type:'warning'
				}).then(
					()=>{
						
					this.$axios({
						method:'POST',
						url:'room/delById',
						headers:{
							authorization:localStorage.getItem("token")
						},
						params:{
							id:this.room.id
						}
					}).then(
						response=>{
							if(response.data.success){
								this.$message.success("关闭成功")
								this.$router.replace({
									name:'home'
								})
							}else{
								this.$message.error(response.data.message)
							}
						},
						error=>{
							console.log(error.message)
						}
					)}).catch(
					()=>{
						this.$message.info('已取消')
					})
					
			},
			getRoomMemberData(){
				this.$axios({
					method:'POST',
					url:'room_member/getAll',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						roomId:this.roomMemberDTO.roomId
					}
				}).then(
					response=>{
						if(response.data.success){
							this.roomMemberData=response.data.data
						}else{
							console.log(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			getTime(created){
				console.log()
				return Math.floor((new Date().getTime()-new Date(created).getTime())/1000/60)
			},
			init(){
				this.getRoomData()
				this.roomMemberDTO.roomId=this.$route.query.roomId;
				
			},
			refresh(){
				this.refreshTimer=setInterval(()=>{
					this.$axios({
					method:'POST',
					url:'room_member/refresh',
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
								
						}else{
							//clearInterval(this.refreshTimer)
							//this.$message.error(response.data.message)
						}
					},
					error=>{
					}
				)
				},1000)

			},
			handlerQuit(){
				this.$router.replace({
					name:'roomList',
					query:{
					type:this.room.type
					}
				},
				
				)
			},
			handlerOffline(){
				this.$axios({
					method:'POST',
					url:'room_member/offline',
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
							this.$message.success("下线成功")
							clearInterval(this.refreshTimer)
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			getRoomData(){
				this.$axios({
					method:'GET',
					url:'room/getById',
					headers:{
						authorization:localStorage.getItem("token")
					},
					params:{
						id:this.$route.query.roomId
					}
				}).then(
					response=>{
						if(response.data.success){
							this.room=response.data.data
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error)
					}
				)
			},
		},
		mounted(){
			this.init()
			this.getRoomMemberData()
			this.getDataTimer=setInterval(()=>{
				this.getRoomMemberData()
			},1000)
		},
		beforeDestroy(){
			//销毁定时器
			clearInterval(this.refreshTimer)
			clearInterval(this.getDataTimer)
		},
	}
</script>

<style scoped>
	.room{
		padding: 0 300px;
	}
	.button-Box{
		height: 90px;
		width: 1300px;
		padding: 0 50px;
		line-height: 90px;
		margin: 20px 0;
		border-bottom: 1px solid gray;
	
	}
	.room-title{
		height: 80px;
		line-height: 80px;
		width: 1300px;
		text-align: center;
		font-size: 30px;
	}
	.button-Box>button{
	}
	.member-box-background{
		width: 100%;
	}
	.member-box{
		padding: 50px 50px;
		width: 1300px;
		height: 1000px;
	
	}
	.member{
		width:200px;
		height: 200px;
		border-radius: 10px;
		display: inline-block;
		margin: 0 50px 50px 50px;
		float: left;
		text-align: center;
		/*border: 1px solid dodgerblue;
		background:rgba(183,209,237,0.4);*/
	}
/*	.member{
		background:url("@/assets/image/room/seat.png") no-repeat;
		height: 140px;
		width: 250px;
		margin: 30px;
		display: inline-block;
	}*/
	.member-joined{
		margin-top: 30px;
		margin-bottom:-20px;
	}
	.member-empty{
		
	}
</style>